<template>
	<view class="">
		<u-sticky>
			<view class="pd10 flex spaceb bg-w">
				<view class="icon" @click="show=true">
					<u-icon name="search" size="20" color="#6A6A6A"></u-icon>
				</view>
				<view class="flex">
					<view class="add mr10" @click="$u.route('/pages/basicData/warehouse/add')">新增</view>
					<view class="icon mr10" v-if="!showCheckbox" @click="showCheckbox=true">
						<u-icon name="list-dot" size="20" color="#6A6A6A"></u-icon>
					</view>
					<view class="icon " @click="resetClick">
						<u-icon name="reload" size="20" color="#6A6A6A"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="pd15">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<view class="bg-w br30 pd15 mb10 pore" style="align-items: baseline;"
					v-for="(item, index) in result.baseWarehouseList" :key="index" @click="goInfo(item)">
					<view class="flex" style="align-items: baseline;">
						<u-checkbox :name="item.id" v-if="showCheckbox">
						</u-checkbox>
						<view class="fl1">
							<view class="flex spaceb">
								<view>{{item.warName}}</view>
								<view class="flex" @click.stop="selectClick(item.id)">
									<u-icon name="list" size="16" color="#6A6A6A"></u-icon>
								</view>
							</view>
							<view>仓库编号：{{item.warCode||''}}</view>
							<view>联系人：{{item.contactPerson||''}}</view>
							<view>联系电话：{{item.contactPhone||''}}</view>
							<view>仓库地址：{{item.warAddress||''}}</view>
							<view>备注信息：{{item.remark||''}}</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="result.baseWarehouseList==''"
				marginTop="200rpx">
			</u-empty>
		</view>
		<view style="height: 130rpx;"></view>
		<view v-if="result.baseWarehouseList!=''">
			<view class="footer-btn flex alcenter spaceb">
				<view class="iconbg" @click="lastClick()">
					<u-icon name="arrow-leftward" color="#C3C3C3" size="20"></u-icon>
				</view>
				<view>{{result.current+'/'+result.pages}}({{result.total}})</view>
				<view class="iconbg" @click="nextClick()">
					<u-icon name="arrow-rightward" color="#C3C3C3" size="20"></u-icon>
				</view>
			</view>
		</view>
		<view class="footer-btn flex" v-show="showCheckbox">
			<view class="w16 text-center border-right" @click="baseWarehouseDels">
				<u-icon name="trash" color="#6A6A6A" size="28" label="删除" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center border-right">
				<u-icon name="order" color="#6A6A6A" size="28" label="打印" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center border-right">
				<u-icon name="arrow-upward" color="#6A6A6A" size="28" label="导出" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center" @click="showCheckbox=false">
				<u-icon name="close" color="#6A6A6A" size="28" label="取消" labelPos="bottom"></u-icon>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="left" :closeable="true">
			<view class="popBox pd15">
				<view>查询</view>
				<view class="mt10">
					<u--input placeholder="仓库名称" border="surround" clearable v-model="search.warName"></u--input>
				</view>
				<view class="mt10">
					<u--input placeholder="仓库编号" border="surround" clearable v-model="search.comCode"></u--input>
				</view>
				<view class="btns">
					<view class="chongzhi" @click="resetClick">重置</view>
					<view class="confirm" @click="queryClick">查询</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-picker :show="showSupplier" :columns="supplier" @confirm="confirmSupplier"></u-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				checkboxValue1: [],
				showCheckbox: false,
				showSupplier: false,
				supplier: [
					['未审核', '已审核']
				],
				search: {
					warName: '',
					warCode: ''
				},
				result: {
					current: 0,
					pages: 0,
					total: 0,
					baseWarehouseList: [],
				},
				pageNo: 1,
				pageSize: 10,
				ids: [],

				title: '标题',
				list: [{
						name: '选项一'
					},
					{
						name: '选项二'
					}
				],
				showSheet: false

			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			
			
		},
		onShow() {
			this.getBaseWarehouseList()

		},
		methods: {
			getBaseWarehouseList() {
				this.$apis.getBaseWarehouseList({
					column: 'createTime',
					order: 'desc',
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					_t: 1721211555986,
					warName: this.search.warName,
					warCode: this.search.warCode,
				}).then(res => {
					let ress = res.result
					this.result = {
						current: ress.current,
						pages: ress.pages,
						total: ress.total,
						baseWarehouseList: ress.records
					}
				})
			},
			baseWarehouseDels() {
				let that = this
				uni.showModal({
					title: '确定删除吗？',
					success(res) {
						if (res.confirm) {
							that.$apis.baseWarehouseDels(that.ids).then(res => {
								if (res.code == 200) {
									that.$u.toast(res.result)
									that.showCheckbox = false
									that.updateWarehouseList()
								}
							})
						}
					}
				})
			},
			//查询
			queryClick() {
				this.pageNo = 1
				this.pageSize = 10
				this.updateWarehouseList()
				this.show = false
			},
			//重置
			resetClick() {
				this.search = {
					warName: '',
					warCode: '',
				}
				this.getBaseWarehouseList()
			},
			updateWarehouseList() {
				this.result.baseWarehouseList = [];
				this.getBaseWarehouseList();
			},
			lastClick() {
				if (this.result.current == 1) return
				this.pageNo--
				this.updateWarehouseList()
			},
			nextClick() {
				if (this.result.current == this.result.pages) return
				this.pageNo++
				this.updateWarehouseList()
			},
			select(e) {
				this.intindex = e
			},
			checkboxChange(n) {
				console.log('change', n);
				this.ids = n
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			confirmSupplier(e) {
				this.search.supplierDictText = e.value
				this.showSupplier = false
			},
			goInfo(item){
				if(!this.showCheckbox){
					uni.navigateTo({
						url:'/pages/basicData/warehouse/add?item='+ encodeURIComponent(JSON.stringify(item))
					})
				}
			},
			selectClick(id) {
				let that = this
				uni.showActionSheet({
					itemList: ['打印', '删除'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if ((res.tapIndex + 1) == 2) {
							uni.showModal({
								title: '确定删除吗？',
								success(res) {
									if (res.confirm) {
										that.$apis.baseWarehouseDel(id).then(res => {
											console.log(res, 123123)
											if (res.code == 200) {
												that.$u.toast(res.result)
												that.updateWarehouseList()
											}
										})
									}
								}
							})
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		},


	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.icon {
		border: 1px solid #E0E0E0;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.add {
		background-color: #3247D3;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		color: #fff;
	}

	.cl-status {
		color: #6A6A6A;
	}

	.pore {
		position: relative;
	}

	.popBox {
		width: 400rpx;
		height: 100%;
		position: relative;

		.btns {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;
			display: flex;
			justify-content: space-around;

			.chongzhi {
				border: 1px solid #E0E0E0;
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
			}

			.confirm {
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
				background-color: #3247D3;
				color: #fff;
			}
		}
	}

	.footer,
	.footer-btn {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		z-index: 999;
	}

	.w16 {
		width: 25%;
	}

	.border-right {
		border-right: 1px solid #C8C7CC;
	}

	.iconbg {
		background-color: #F0F0F0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.z-98 {
		z-index: 98;
	}

	.z-99 {
		z-index: 99;
	}
</style>